<template>
  <a-form :form="form" layout="inline">
    <a-row :gutter="16">
      <a-col :span="6">
        <a-form-item label="姓">
          <a-input
            v-decorator="[
              'last_name',
            ]"
            placeholder="姓"
          />
        </a-form-item>
      </a-col>
      <a-col :span="6">
        <a-form-item label="名">
          <a-input
            v-decorator="[
              'first_name',
            ]"
            placeholder="名"
          />
        </a-form-item>
      </a-col>
      <a-col :span="6">
        <a-form-item label="手机号">
          <a-input
            v-decorator="[
              'mobile'
            ]"
            placeholder="手机号"
          />
        </a-form-item>
      </a-col>
      <a-col :span="6">
        <a-form-item label="邮箱">
          <a-input
            v-decorator="[
              'email'
            ]"
            placeholder="邮箱"
          />
        </a-form-item>
      </a-col>
      <a-col :span="6" style="margin: 20px 0;">
        <a-form-item>
          <a-button type="primary" style="margin-right: 30px" @click="search">查询</a-button>
          <a-button @click="resetFields">重置</a-button>
        </a-form-item>
      </a-col>
    </a-row>
  </a-form>
</template>

<script>
export default {
  data () {
    return {
      // form
      form: this.$form.createForm(this),
    }
  },

  methods: {
    search () {
      const fields = this.form.getFieldsValue()

      this.$emit('search', fields)
    },

    resetFields () {
      this.form.resetFields()

      this.search()
    },
  },
}

</script>
